import { useState } from 'react';

type Report = { name: string; value: number; unit?: string };

export default function SymptomChecker() {
  const [age, setAge] = useState<number | ''>('');
  const [sex, setSex] = useState<'男' | '女' | ''>('');
  const [symptoms, setSymptoms] = useState<string>('');
  const [reports, setReports] = useState<Report[]>([ { name: '体温', value: 36.8, unit: '℃' }, { name: '血压收缩压', value: 118, unit: 'mmHg' } ]);
  const [result, setResult] = useState<string>('');

  function analyze() {
    const s = symptoms;
    const fever = s.includes('发热') || reports.some(r => r.name.includes('体温') && r.value >= 37.5);
    const cough = s.includes('咳');
    const abd = s.includes('腹') || s.includes('肚');
    let text = '综合您的情况：';
    if (fever && cough) text += '倾向上呼吸道感染或流感样疾病；';
    if (abd) text += '存在腹部不适，需排查消化系统问题；';
    if (!fever && !cough && !abd) text += '未见明显急性征象；';
    text += '建议：充足休息、补水，必要时线下就诊相关专科（内科/呼吸/消化）。';
    setResult(text);
  }

  function updateReport(i: number, key: keyof Report, v: string) {
    setReports(prev => prev.map((r, idx) => idx === i ? { ...r, [key]: key === 'value' ? Number(v) : v } : r));
  }

  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold">症状自查 · 报告辅助</h2>
      <div className="rounded-2xl bg-white p-4 shadow-sm space-y-3">
        <div className="grid grid-cols-3 gap-3 text-sm">
          <input value={age} onChange={(e) => setAge(e.target.value ? Number(e.target.value) : '')} placeholder="年龄" className="rounded-xl border px-3 py-2" />
          <select value={sex} onChange={(e) => setSex(e.target.value as any)} className="rounded-xl border px-3 py-2">
            <option value="">性别</option>
            <option>男</option>
            <option>女</option>
          </select>
          <input placeholder="既往史(可选)" className="rounded-xl border px-3 py-2" />
        </div>

        <textarea value={symptoms} onChange={(e) => setSymptoms(e.target.value)} placeholder="主诉症状与持续时间，如：发热咳嗽3天、咽痛..." className="mt-2 w-full rounded-xl border p-3 text-sm" rows={4} />

        <div>
          <div className="mb-2 text-sm text-gray-600">体检/检验关键指标（可编辑）</div>
          <div className="space-y-2">
            {reports.map((r, i) => (
              <div key={i} className="grid grid-cols-3 gap-2 text-sm">
                <input value={r.name} onChange={e => updateReport(i, 'name', e.target.value)} className="rounded-xl border px-3 py-2" />
                <input type="number" value={r.value} onChange={e => updateReport(i, 'value', e.target.value)} className="rounded-xl border px-3 py-2" />
                <input value={r.unit ?? ''} onChange={e => updateReport(i, 'unit', e.target.value)} className="rounded-xl border px-3 py-2" />
              </div>
            ))}
            <button className="text-brand-600 text-sm" onClick={() => setReports(r => [...r, { name: '', value: 0 } as any])}>+ 添加指标</button>
          </div>
        </div>

        <button onClick={analyze} className="mt-2 w-full rounded-xl bg-brand-600 py-3 text-white font-medium">智能分析</button>
      </div>

      {result && (
        <div className="rounded-2xl bg-white p-4 shadow-sm">
          <div className="font-medium mb-1">初步判断与建议</div>
          <p className="text-sm text-gray-700 leading-relaxed">{result}</p>
        </div>
      )}
    </div>
  );
}


